<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title> CSS Scroll Snap 2 Test: scrollsnapchange events</title>
  <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-2/#snap-events">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script src="/css/css-scroll-snap-2/resources/common.js"></script>
  <script src="/css/css-scroll-snap-2/resources/programmatic-scroll-common.js"></script>
  <script src="/dom/events/scrolling/scroll_support.js"></script>
  <script src="/web-animations/testcommon.js"></script>
</head>

<body onload="runTests()">
  <style>
    body {
      margin: 0px;
    }

    div {
      position: absolute;
      margin: 0px;
    }

    #spacer {
      width: 2000px;
      height: 2000px;
    }

    .scroller {
      height: 400px;
      width: 400px;
      overflow: scroll;
      scroll-snap-type: both mandatory;
    }

    .snap_point {
      width: 300px;
      height: 300px;
      scroll-snap-align: start;
    }

    #snap_point_1 {
      left: 0px;
      top: 0px;
      background-color: red;
    }

    #snap_point_2 {
      top: 300px;
      left: 300px;
      background-color: orange;
    }

    #snap_point_3 {
      left: 600px;
      top: 600px;
      background-color: blue;
    }
  </style>
  <div id="scroller" class="scroller">
    <div id="spacer"></div>
    <div id="snap_point_1" class="snap_point"></div>
    <div id="snap_point_2" class="snap_point"></div>
    <div id="snap_point_3" class="snap_point"></div>
  </div>
  <script>
  function runTests () {
    let scroller = document.getElementById("scroller");
    let snap_point_2 = document.getElementById("snap_point_2");

    promise_test(async (t) => {
      await waitForCompositorCommit();
      const test_data = {
        scroller: scroller,
        scrolling_function: () => {
            scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop);
        },
        expected_snap_targets: { block: snap_point_2, inline: snap_point_2 },
        expected_scroll_offsets: {
          x: snap_point_2.offsetLeft,
          y: snap_point_2.offsetTop,
        }
      };
      await test_scrollsnapchange(t, test_data);
    }, "scrollsnapchange event fires after snap target changes via scrollTo");

    promise_test(async (t) => {
      await waitForCompositorCommit();
      const test_data = {
        scroller: scroller,
        scrolling_function: () => {
            scroller.scrollTo(snap_point_2.offsetLeft, snap_point_2.offsetTop);
        },
        expected_snap_targets: { block: snap_point_2, inline: snap_point_2 },
        expected_scroll_offsets: {
          x: snap_point_2.offsetLeft,
          y: snap_point_2.offsetTop,
        }
      };
      await test_scrollsnapchange(t, test_data, /*use_onsnap_member*/true);
    }, "Element.onscrollsnapchange event fires after snap target changes via" +
       "scrollTo");

    promise_test(async (t) => {
      checkSnapEventSupport("scrollsnapchange");
      await waitForScrollReset(t, scroller);
      await waitForCompositorCommit();
      assert_equals(scroller.scrollTop, 0,
        "scroller is initially not scrolled vertically");
      assert_equals(scroller.scrollLeft, 0,
        "scroller is initially not scrolled horizontally");

      let scrollsnapchange_promise = waitForScrollSnapChangeEvent(scroller, false);
      // Set the scroll destination to just a little off (0, 0) so we snap
      // back to the top box.
      let scroll_top_target = 10;
      let scroll_left_target = 10;

      scroller.scrollTo(scroll_left_target, scroll_top_target);
      let evt = await scrollsnapchange_promise;
      assert_equals(evt, null, "no snapchanges since scroller is back to top");
      // scroller should snap back to (0,0) with no scrollsnapchange event.
      assert_equals(scroller.scrollTop, 0, "scroller snaps back to the top");
      assert_equals(scroller.scrollLeft, 0, "scroller snaps back to the left");

      scrollsnapchange_promise = waitForScrollSnapChangeEvent(scroller);
      scroll_top_target = snap_point_2.offsetTop + 10;
      scroll_left_target = snap_point_2.offsetLeft + 10;
      // This scroll should snap to snap_point_2, so scrollsnapchange should be
      // fired.
      scroller.scrollTo(scroll_left_target, scroll_top_target);

      evt = await scrollsnapchange_promise;
      assertSnapEvent(evt, { block: snap_point_2, inline: snap_point_2 })
      assert_approx_equals(scroller.scrollTop, snap_point_2.offsetTop, 1,
          "scroller snaps to the top of snap_point_2");
      assert_approx_equals(scroller.scrollLeft, snap_point_2.offsetLeft, 1,
          "scroller snaps to the left of snap_point_2");
    }, "scrollsnapchange is not fired if snap target doesn't change on " +
       "programmatic scroll");
  }
  </script>
</body>
</html>
